<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      $watch:
        作用：
          也是做监听，应用场景一般在于业务代码层面上来做，而不是一开始就监听好
        
        比如：
          用户操作了某个按钮之后，才开始监听某个数据

        语法：
          const stop = this.$watch(要监听的数据，处理函数，其他的配置项)
              其他的配置项 - 包含有 deep immediate flush 选项的一个对象

              stop  - 是一个函数，调用该函数，可以停止该监听
     -->

    <div id="app">
      <button @click="count++">{{ count }}</button>
      <button @click="open">开始监听</button>
      <button @click="close">关闭监听</button>

      <hr />
      <button @click="toggle">{{ stop ? '关闭' : '开启' }}监听</button>
    </div>

    <script src="../lib/vue3.js"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            count: 1,

            stop: null, // 表示监听的关闭函数
          };
        },

        methods: {
          toggle() {
            if (this.stop) {
              // 存在
              this.stop();
              this.stop = null;
            } else {
              // 不存在
              this.stop = this.$watch("count", (newVal) => {
                console.log("count 被修改了");
              });
            }
          },

          open() {
            // 调用 this.$watch 来监听 count
            this.stop = this.$watch("count", (newVal) => {
              console.log("count 被修改了");
            });
          },

          close() {
            // ...

            this.stop && this.stop();

            // 可选链?.出来之后可以如下
            // this.stop?.();
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
